/*
  学习目标：React生命周期-更新阶段
  三大阶段：挂载时、更新时、卸载时
  挂载时 等同于Vue中的创建和挂载二合一
  componentDidUpdate 更新阶段钩子函数
  componentWillUnmount 卸载钩子函数
 */

import React from 'react';
import ReactDom from 'react-dom/client';

class Handler extends React.Component {
  state = {
    isShow: true,
  };

  render() {
    return (
      <div>
        <button onClick={() => this.setState({ isShow: !this.state.isShow })}>
          点我切换组件
        </button>
        {this.state.isShow && <Child></Child>}
      </div>
    );
  }
}

class Child extends React.Component {
  componentWillUnmount() {
    console.log('componentWillUnmount卸载----->Child');
  }
  render() {
    return <div>子组件</div>;
  }
}

// 18版本以上新出的挂载方法
const root = ReactDom.createRoot(document.getElementById('root'));
root.render(<Handler></Handler>);
